<template>
  <!-- 杨 -->

  <div class="home">
    <div class="HomeHeader">
      <div class="logo">
        化妆品推荐网站
      </div>
      <div class="list">
        <div v-for="item, i in list" :key="item.id">
          <span :class="{ color: list[i].router == Router.currentRoute.value.fullPath }" @click="Navigation(i)">{{
            item.name
          }}</span>
        </div>
      </div>
      <div class="login" @click="Buttonclick" v-if="!token">登录/注册</div>
      <div class="login" v-if="token">
        <el-dropdown>
          
          <span class="el-dropdown-link" style="">
            {{ name }}
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item, i in personal" :key="item.id" @click="Individualusers(i)">{{
                item.name
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>

  <el-row justify="center" class="nav">
    <el-col :span="20"  style="margin-top: 20px;">
      <router-view></router-view>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, reactive } from "vue"
import { useRouter } from 'vue-router'
import {list,personal} from '../utils/data/index.js'
const Router = useRouter()

const token  = localStorage.getItem("token")
const name = localStorage.getItem("name")

// 路由跳转
const Navigation = (i) => {
  Router.push(list[i].router)
}
// 跳转至登录
const Buttonclick = () => {
  Router.push('/login')
}

//点击个人用户
const Individualusers = (i) => {
  if (i == 0) {
    Router.push(personal[i].router)
  } else if (i == 1) {
    Router.push(personal[i].router)
    localStorage.clear()

  }

}



</script>

<style scoped lang="less">
.home {
  font-size: 14px;
  line-height: 60px;
  color: #fff;
  background-color: #363F5E;


  .HomeHeader {
    height: 60px;
    padding: 0px 8vw;
    display: flex;

    .logo {
      flex: 2;
      line-height: 60px;
      display: flex;

      span {
        margin-top: 10px;
        margin-right: 10px;
      }

      h2 {
        color: #fff;
      }
    }


    .list {
      flex: 8;
      display: flex;
      padding: 0px 40px;
      cursor: pointer;


      div {

        padding: 0px 20px;

        span {
          padding-bottom: 5px;
          color: #fff;
        }

      }
    }

    .color {
      font-weight: 600;
      color: #3BBAB3;
      border-bottom: 2px solid #3BBAB3;
    }

    .login {
      color: #fff;
      cursor: pointer;
      flex: 1;

      .el-dropdown-link {
        color: #fff;
        margin-top: 20px;
      }
    }
  }

  .HomeFoot {
    height: 440px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 180px;

    .title {
      font-weight: 500;
      font-family: Source Han Sans CN, Roboto, sans-serif;
      font-style: normal;
      font-size: 51px;
      color: #fff;
    }

    .nav {
      font-size: 25px;
      margin-top: 20px;
      color: #fff;
    }
  }


}

.nav {
  background-color: #F5F6F8;
  padding: 10px 0px;
}

.bgc {
  background-image: url(https://ycc888.oss-cn-hangzhou.aliyuncs.com/%E7%8C%BF%E6%9F%A5%E6%9F%A5%E5%9B%BE%E7%89%87/home.png);
}
</style>